<template>
    <div>
        <el-row :gutter="24">
            <el-col :md="3" :sm="6">{{ $t('channel name') }}</el-col>
            <el-col :md="3" :sm="6">{{ $t('video size') }}</el-col>
            <el-col :md="6" :sm="12">{{ $t('codec') }}</el-col>
            <el-col :md="3" :sm="6">{{ $t('rate control') }}</el-col>
            <el-col :md="3" :sm="6">{{ $t('bitrate') }}(kb/s)</el-col>
            <el-col :md="2" :sm="4">{{ $t('framerate') }}</el-col>
            <el-col :md="2" :sm="4">GOP({{ $t('second') }})</el-col>
            <el-col :md="2" :sm="4">{{ $t('enable') }}</el-col>
        </el-row>
        <div v-for="dataItem in dataList">
            <el-divider></el-divider>
            <el-row :gutter="24" style="margin-top:16px" v-for="(data, index) in dataItem.encvList">
                <el-col :md="3" :sm="6">
                    <el-input v-if="index == 0" v-model="dataItem.name" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="6">
                    <el-select v-model="data.width_height" :placeholder="$t('select_placeholder')" style="width: 100%;"
                        @change="(val) => { whChange(val, data) }">
                        <el-option v-for="item in videoSizeOptions" :key="item.value" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="6" :sm="12">
                    <el-select v-model="data.codec_profile" :placeholder="$t('select_placeholder')" style="width: 100%;"
                        @change="(val) => { cpChange(val, data) }">
                        <el-option v-for="item in codecOptions" :key="item.value" :label="item.label" :value="item.value"
                            :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="3" :sm="6">
                    <el-select v-model="data.rcmode" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option v-for="item in rcmodeOptions" :key="item.value" :label="item.label" :value="item.value"
                            :disabled="item.disabled"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="3" :sm="6">
                    <el-input v-model="data.bitrate" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.framerate" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.gop" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4" v-if="index == 0">
                    <el-switch v-model="dataItem.enable" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="2" :sm="4" v-if="index == 1">
                    <el-switch v-model="dataItem.enable2" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup name="video-stream">
const props = defineProps(['data', 'videoSizeOptions', 'codecOptions', 'rcmodeOptions'])
let dataList = ref([])
let videoSizeOptions = ref([])
let codecOptions = ref([])
let rcmodeOptions = ref([])
watchEffect(() => {
    videoSizeOptions.value = props.videoSizeOptions
    codecOptions.value = props.codecOptions
    rcmodeOptions.value = props.rcmodeOptions

    dataList.value = props.data?.length ? props.data.map(item => {
        item.encv.width_height = item.encv.width + 'x' + item.encv.height
        item.encv.codec_profile = item.encv.codec + ',' + item.encv.profile
        item.encv2.width_height = item.encv2.width + 'x' + item.encv2.height
        item.encv2.codec_profile = item.encv2.codec + ',' + item.encv2.profile

        item.encvList = [item.encv, item.encv2]
        return item
    }) : []

})
function whChange(val, data) {
    data.width = val.split('x')[0]
    data.height = val.split('x')[1]
}
function cpChange(val, data) {
    data.codec = val.split(',')[0]
    data.profile = val.split(',')[1]
}

onUnmounted(() => {

});

</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  